<template>
  <div>
    <a-modal
      width="800px"
      v-model:open="open"
      title="查看用户"
      @ok="clickOk"
      :confirmLoading="confirmLoading"
    >
      <a-transfer
        v-if="open"
        v-model:target-keys="permission"
        :data-source="permissionData"
        :show-select-all="false"
        :rowKey="(record: Record<string, string | number>) => record.id"
      >
        <template
          #children="{
            filteredItems,
            selectedKeys,
            disabled: listDisabled,
            onItemSelectAll,
            onItemSelect,
          }"
        >
          <a-table
            :row-selection="
              getRowSelection({
                disabled: listDisabled,
                selectedKeys,
                onItemSelectAll,
                onItemSelect,
              })
            "
            :row-key="'id'"
            :pagination="pagination"
            :columns="columns"
            :data-source="filteredItems"
            @change="tableChange"
            size="small"
            :style="{ pointerEvents: listDisabled ? 'none' : null }"
          />
        </template>
      </a-transfer>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { getPermissionListApi, type Permission } from '@/api/permission.api.ts'
import { getRolePermissionApi, setRolePermissionApi } from '@/api/role.api.ts'

const open = ref<boolean>(false)

const roleRecord = ref()
const showModal = (record: Record<string, string>[]) => {
  open.value = true
  roleRecord.value = record
  permission.value.length = 0;
  pagination.value.total = 0;
  pagination.value.current = 1;
  getRolePermission()
  getList()
}

const permission = ref<number[]>([])
const permissionData = ref<Permission[]>([])
const pagination = ref({
  pageSize: 5,
  total: 0,
  current: 1,
})
const getRowSelection = ({
  disabled,
  selectedKeys,
  onItemSelectAll,
  onItemSelect,
}: Record<string, any>) => {
  return {
    getCheckboxProps: (item: Record<string, string | boolean>) => ({
      disabled: disabled || item.disabled,
    }),
    onSelectAll(selected: boolean, selectedRows: Record<string, string | boolean>[]) {
      const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key)
      onItemSelectAll(treeSelectedKeys, selected)
    },
    onSelect({ key }: Record<string, string>, selected: boolean) {
      onItemSelect(key, selected)
    },
    selectedRowKeys: selectedKeys,
  }
}
const getList = () => {
  getPermissionListApi({
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }).then((res) => {
    permissionData.value = res.records
    pagination.value.total = res.total
  })
}
const tableChange = (pag: { current: number; pageSize: number }) => {
  pagination.value.current = pag.current
  pagination.value.pageSize = pag.pageSize
  getList()
}
const getRolePermission = () => {
  getRolePermissionApi(roleRecord.value.id).then((res) => {
    permission.value = res.permissions.map((item) => {
      return item.id
    })
  })
}
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'code',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: 'type',
    dataIndex: 'type',
    key: 'type',
  },
]
const confirmLoading = ref(false)
const clickOk = async () => {
  confirmLoading.value = true
  try {
    await setRolePermissionApi(roleRecord.value.id, {
      permissionIds: permission.value,
    })
    open.value = false
  } finally {
    confirmLoading.value = false
  }
}
defineOptions({
  name: 'RolePermissionModal',
})
defineExpose({
  showModal,
})
</script>
